<template>
    <BPTable ref='tableRef' align='center' row-key='id' :columns='columns' :api='rechargePageApi' :buttons='buttons'>
        <template #status="{record}">
            <a-tag :color="record.status == 1 ? 'success' : 'error'">{{ PAY_STATUS[record.status] }}</a-tag>
        </template>
    </BPTable>
</template>

<script lang='ts' setup>
    import { ref } from "vue";
    import { rechargePageApi } from '@/api/chargingCard'
    import { parseTime } from "@/utils";
    import { CLIENT_SOURCE, PAY_STATUS } from "@/constant";

    CLIENT_SOURCE

    const tableRef = ref()


    const buttons = ref<SearchButton[]>([])

    const columns = ref<Column[]>([
        {
            dataIndex : 'cardNo',
            title : '卡号',
            inSearch : true,
        },


        {
            dataIndex : 'orderNo',
            title : '订单号',
            inSearch : true,
        },

        {
            dataIndex : 'payChannel',
            title : '支付方式',
            customRender({text}) {
                return CLIENT_SOURCE[text]
            }
        },

        {
            dataIndex : 'status',
            title : '支付状态',
        },

        {
            dataIndex : 'amount',
            title : '充值金额(元)',
        },

        {
            dataIndex : 'rewardAmount',
            title : '赠送金额(元)',
        },

        {
            title : '时间',
            dataIndex : 'createTime',
            align : 'center',
            customRender({text}) {
                return parseTime(text)
            }
        }
    ])

    const dataRows = ref<any[]>([])
    
</script>